/* eslint-disable no-unused-vars */
<template>
  <div class="plan">
    <top />
    
    <!-- 搜索 -->
    <el-row :span="24" class="title" style="padding-left:4vw;">
      <el-col :span="4">
        <p></p>
      </el-col>
      <el-col :span="4">

      </el-col>
      <el-col :span="4">

      </el-col>
      <el-col :span="8">
        <p></p>
      </el-col>
      <el-col :span="4">
        <el-button @click="showAddPlan()">新增生产计划</el-button>
      </el-col>
    </el-row>
    <!-- 新增计划的弹出框 -->
    <el-dialog title="" :visible.sync="addplanDialog">
      <el-form :model="planAddForm" label-width="80px">

        <el-form-item label="计划名称">
          <el-input  v-model="planAddForm.planName"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="订单编号">
          <!-- select綁定變量 -->
          <el-select v-model="planAddForm.orderId" placeholder="请选择" >
            <el-option v-for="item in orderList" :key="item.orderId" :label="item.orderId" :value="item.orderId" >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品名称">
          <el-input  v-model="planAddForm.productName"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="生产数量">
          <el-input  v-model="planAddForm.planMount"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="截至日期">
          <el-date-picker v-model="planAddForm.deliveryDate" type="date"  placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="开始时间">
          <el-date-picker v-model="planAddForm.planBeginDate" type="date"  placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker v-model="planAddForm.planEndDate" type="date"  placeholder="选择日期">
          </el-date-picker>          
        </el-form-item>

        <el-form-item label="工厂编号">
          <el-input  v-model="planAddForm.factoryId"  style="width: 220px"></el-input>
        </el-form-item>

        <el-button type="primary" @click="addplan()">立即创建</el-button>
        <el-button @click="addplanDialog = false">取消</el-button>
      </el-form>
    </el-dialog>

    <!-- 动态修改计划的弹出框 -->
    <el-dialog title="" :visible.sync="updateplanDialog">
      <el-form :model="planupdateForm" label-width="80px">
        <el-form-item label="订单编号">
          <el-input  v-model="planupdateForm.orderId"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="产品名称">
          <el-input  v-model="planupdateForm.productName"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="生产数量">
          <el-input  v-model="planupdateForm.planMount"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="截至日期">
          <el-date-picker v-model="planupdateForm.deliveryDate"  type="date"   placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="开始时间">
          <el-date-picker v-model="planupdateForm.planBeginDate"  type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker v-model="planupdateForm.planEndDate"  type="date" placeholder="选择日期">
          </el-date-picker>          
        </el-form-item>

        <el-form-item label="工厂编号">
          <el-input  v-model="planupdateForm.factoryId"  style="width: 220px"></el-input>
        </el-form-item>

        <el-button type="primary" @click="updateplan()">立即修改</el-button>
        <el-button @click="updateplanDialog = false">取消</el-button>
      </el-form>
    </el-dialog>

    <!-- 显示所有计划信息 -->
    <el-table :data="planList" style="width: 100%;padding-left:4vw;">

      <el-table-column prop="planId" label="计划编号" width="110">
      </el-table-column>

     <el-table-column prop="planName" label="计划名称" width="110">
      </el-table-column>

      <el-table-column prop="orderId" label="订单编号" width="110">
      </el-table-column>

      <el-table-column prop="productName" label="产品名称" width="110">
      </el-table-column>


      <el-table-column prop="planMount" label="生产数量" width="110">
      </el-table-column>


      <el-table-column prop="deliveryDate"  value-format="yyyy-MM-dd" label="截至日期" width="110" >
      </el-table-column>

      <el-table-column prop="planBeginDate"  value-format="yyyy-MM-dd" label="开始时间" width="110">
      </el-table-column>


      <el-table-column prop="planEndDate" value-format="yyyy-MM-dd" label="结束时间" width="110">
      </el-table-column>


      <el-table-column prop="factoryId" label="工厂编号" width="110">
      </el-table-column>


      <el-table-column prop="planState" label="计划状态" width="110">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="doWork(scope.$index, scope.row)">启动</el-button >
          <el-button size="mini" @click="showUpdate(scope.$index, scope.row)">编辑</el-button >
          <el-button size="mini" type="danger"
            @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import Top from "@/components/Top.vue";

export default {
  name: "plan",
  data() {
    return {
      factoryId:this.$route.query.factoryId,
      addplanDialog: false,
      updateplanDialog: false,
      planAddForm: {},
      planList:[{}],
      planupdateForm:{},
      orderList:[],
      proList:[]
    };
  }, //data
  created(){

  },
  mounted: function() {
      this.getAllPlan();
    },
  methods: {
        //获取全部
    getAllPlan(){
      this.$axios.post(
        'PlanController/listPlan',
        this.$qs.stringify({factoryId:this.factoryId})
      ).then((value) => { // eslint-disable-line no-unused-vars
        this.planList = value.data;
        console.log(value.data);
      }).catch((value) => {
        console.error(value);
      })
    },
    //显示新增页面
    showAddPlan() {
      this.addplanDialog = true;
      this.planAddForm.factoryId = this.factoryId;
      this.showAllOrderId();

    },
    //
    showProduct(){
      this.$axios.post(
        'ProductController/findAllProductByFactoryId',
        this.$qs.stringify({factoryId:this.factoryId})
      ).then((value) => {
        this.proList=value.data;
      }).catch((value) => {
        console.error(value)
      })
    },
    //
    showAllOrderId(){
      this.$axios.post(
        'OrderController/findAllOrderByFactoryId',
        this.$qs.stringify({factoryId:this.factoryId})
      ).then((value) => {
        this.orderList=value.data;
      }).catch((value) => {
        console.error(value)
      })
    },
    //显示修改页面
    showUpdate(index,row){
      if(row.planState=="运行中"){
        this.$confirm("该计划正在运行中，不能编辑")
      }else{
      this.updateplanDialog = true;
      this.planupdateForm.planId = row.planId;
      this.planupdateForm.factoryId = row.factoryId;
      }

    },//showUpdate
    //新增计划
    addplan() {
      this.$axios.post(
        'PlanController/savePlan',
        this.$qs.stringify(this.planAddForm)
      ).then((value) => {
        this.planAddForm = value.data;
        this.$confirm("创建成功").then(() => {
          this.addplanDialog = false;
          this.getAllPlan();
        })
      }).catch((value) => {
        console.error(value);
      })
    },//addplan
    //删除计划
    handleDelete(index,row){
      if(row.planState=="运行中"){
        this.$confirm("该计划正在运行中，不能删除")
      }else{
      this.$confirm("确认删除？").then(() => {
        this.$message("删除成功");
        this.$axios.post(
          'PlanController/removePlan',
          this.$qs.stringify({planId:row.planId})
        ).then((res) => {
          this.planList = res.data;
          this.getAllPlan();
        }).catch((value) => {
          console.error(value);
        })
      })
      }
    },//handleDelete
    //启动计划
    doWork(index,row){
      if(row.planState=="运行中"){
        this.$confirm("计划已启动")
      }else if(row.planState=="已完成"){
        this.$confirm("计划已完成")
      }else{
        this.$confirm("是否启动?").then(() => {
          this.$message("启动成功");
          this.$axios.post(
            'PlanController/updatePlan',
            this.$qs.stringify({planId:row.planId,planState:'运行中'})
          ).then((res) => {
            let num = res.data;
            this.getAllPlan();
            this.$axios.post(
              'WorkOrderController/saveWorkOrder',
              this.$qs.stringify({
                planId:row.planId,
                state:"未启动",
                productName:row.productName,
                mechineId:''
              })
            ).then((value) => {
              num = value.data;
              console.log(num);
            }).catch((value) => {
              console.error(value);
            })
          }).catch((value) => {
            console.error(value);
          })
        })
      }

    },//doWork
    //动态修改计划
    updateplan(){
      this.$axios.post(
        'PlanController/updatePlan',
        this.$qs.stringify(this.planupdateForm)
      ).then((res) => {
        this.planupdateForm = res.data;
        this.$confirm("修改成功").then(() => {
          this.updateplanDialog = false;
          this.getAllPlan();
        })
      }).catch((value) => {
        console.error(value);
      })
    },//updateplan
  },
  components: {
    Top,
  },
};
</script>
